<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        section {
            margin: auto;
            width: 1000px;
            height: 500px;
            margin-top: 20px;
        }

        .cover {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            background-color: #5e5;
        }
        /*transform*/

        section {
            position: relative;
            perspective: 2000px;
        }

        .cover {
            transform-origin: 50% 50% 0;
        }
    </style>
</head>

<body>
    <section>
        <div class="cover">
        </div>
    </section>
    <script>
        var origin = {
            X: document.body.clientWidth / 2,
            Y: document.body.clientHeight / 2
        };
        var o = document.querySelector('.cover');
        document.querySelector('section').onmouseover = function () {
            document.querySelector('section').addEventListener('mousemove', function (e) {
                var rotate = { x: 1 - e.pageY / origin.Y, y: e.pageX / origin.X - 1 };
                var transform = "rotateX(" + rotate.x * 10 + "deg) rotateY(" + rotate.y * 10 + "deg)";  //变换效果
                o.style.transform = transform;
                o.style.boxShadow = -parseInt(rotate.y * 30) + 'px ' + parseInt(rotate.x * 20 + 20) + 'px ' + '50px #333';  //边框阴影效果
            });
        };
        document.querySelector('section').onmouseout = function () {
            o.style.transform = "rotateX(0deg) rotateY(0deg)";
            o.style.boxShadow = '0px 0px';
        }

    </script>
</body>

</html>